<template>
    <div>
      <el-button icon="el-icon-refresh" @click="getFileList" type="primary">刷新</el-button>
      <el-table :data="fileList">
        <el-table-column>
          <template #default="{ row }">
            {{ row.fileName }}
          </template>
        </el-table-column>
        <el-table-column>
          <template #default="{ row }">
            <el-button icon="el-icon-download" @click="downloadFile(`/api/file/download2?fileId=${row.id}&source=FILE&userId=${userInfo.id}`, row)">
              下载
            </el-button>
            <el-button type="primary" icon="el-icon-delete" @click="deleteFile(row.id)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </template>
  
  <script lang="ts" setup>
  import { ref, onMounted } from 'vue';
  import { useFilesStore } from '@/stores/file/useFileList';
  import { useUserStore } from '@/stores/user';
  import { requestIsSuccess } from '@/api/request';
import { storeToRefs } from 'pinia';
  
  const filesStore = useFilesStore();
  const userStore = useUserStore();
  
  const {fileList} = storeToRefs(filesStore);
  const userInfo = ref(userStore.userInfo);
  
  const getFileList = () => {
    filesStore.getFileListByToken();
  };
  
  const downloadFile = (href: string, title: any) => {
    const a = document.createElement('a');
    a.setAttribute('href', href);
    a.setAttribute('target', '_blank');
    a.click();
  };
  
  const deleteFile = async (id: string) => {
    const result = await filesStore.deleteFile( id,  'FILE');    
    await filesStore.getFileListByToken();
    
  };
  
  onMounted(() => {
    getFileList();
  });
  </script>
  
  <style scoped>
  
  </style>    